<template>
  <div id="app">
    <el-container class="container">
      <el-aside :width="width"
                class="aside"
                v-show="!hiddenAside">
        <sidebar class="sidebar-container" />
      </el-aside>
      <el-container>
        <el-header class="header">
          <navbar />
        </el-header>
        <tags-view v-if="needTagsView" />
        <el-main id="el-main">
          <keep-alive :include="cachedViews">
            <router-view :key="key" />
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { h } from '@vue/runtime-core'
import { mapGetters, mapState } from 'vuex'
export default {
  components: {
    navbar: () => import('@/layout/components/navbar'),
    Sidebar: () => import('@/layout/components/aside'),
    TagsView: () => import('@/layout/components/TagsView')
  },
  data () {
    return {
      screenWidth: 0,
      notify: []
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'hideSidebar'
    ]),
    width () {
      return !this.sidebar.opened ? '64px' : '160px'
    },
    hiddenAside () {
      return this.$store.getters.hideSidebar
    },
    sidebarOpened () {
      return this.$store.getters.sidebarOpened
    },
    ...mapState({
      needTagsView: state => state.tagsView.isNeed,
    }),
    cachedViews () {
      return this.$store.state.tagsView.cachedViews
    },
    key () {
      return this.$route.path
    }
  },
  watch: {
    screenWidth (v) {
    }
  },
  mounted () {
    // var elementResizeDetectorMaker = require("element-resize-detector");//导入
    // // 创建实例
    // var erd = elementResizeDetectorMaker();
    // // 创建实例带参
    // var erdUltraFast = elementResizeDetectorMaker({
    //               strategy: "scroll", //<- For ultra performance.
    //               callOnAdd: true,
    //               debug: true
    //           });
    // //监听id为test的元素 大小变化
    // erd.listenTo(document.getElementById("el-main"), function(element) {
    //   var width = element.offsetWidth;
    //   var height = element.offsetHeight;
    //   console.log("Size: " + width + "x" + height);
    // });
  },
  methods: {

  }
}
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
<style lang="scss" scoped>
@import '@/assets/css/color.scss';
.container {
  height: 100vh;
}
.header {
  background: $menu_text;
  border-bottom: 1px solid #ddd;
}
.aside {
  background: $color_primary;
  transition: all 0.5s;
}
#el-main {
  background: #f5f5f5;
  padding: 0 10px;
  min-width: 1000px;
  padding-top: 10px;
}
</style>
